<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- bootstrap样式、主题、核心文档 -->
<link rel="stylesheet" href="../libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="../libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<style type="text/css">
	.jumbotron{
		height:400px;
	}
	.btn.btn-info{
		width:300px;
		font-size: 20px;
	}
	.inner{
		float:left;
		height:300px;
		
		
	}
	#inner2{
		background-color: white;
	}
	
	.container{
		margin-left: 0;
		margin-right: 0;
		width:100%;
	}
</style>
</head>
<body style="padding: 0;">
	
	<div class="jumbotron container">
		<div style="width:40%; margin-left: 85px;" class="inner">
		<form class="form-inline">
		<p>消费类型
			<select class="form-control" style="width:200px" name="types" id="types">
			</select>
		</p>
		<p>借款金额 <input type="text" class="form-control" id="exampleInputName2" placeholder="输入金额" style="width:200px;" name="money"></p>
		<p>借款时长
			<select class="form-control" style="width:200px" name="duration" id="duration">
			</select>
		</p>
		<p>月利率&nbsp;&nbsp;&nbsp;&nbsp;<span id="monthrate"></span>%</p>
		<p>(单笔服务费最低10%，信息有效时长7天)</p>
	 	<p><button type="button" class="btn btn-info">我要借钱</button></p>
		</form>
		</div>
		<div style="width:50%;" class="inner jumbotron" id="inner2">
			<h2><i>审核快、放款快、利息低</i></h2>
			<h2>轻松解决您的当务之急</h2>
			<h2>助您一<span style="font-size: 36px; color: gold">'笔'</span>之力</h2>
		</div>
	</div>
<script type="text/javascript">
	$(function(){
		$.ajax({
			type:"post",
			url:"../SelectTypes",
			dataType:"json",
			success:function(data){
				$("#types").empty();
				$.each(data,function(index,types){
					$("#types").append("<option value='"+types.id+"'>"+types.name+"</option>");
					
				});
			}
		});
		
		$.ajax({
			type:"post",
			url:"../SelectRate",
			dataType:"json",
			success:function(data){
				$("#duration").empty();
				$.each(data,function(index,rate){
					$("#duration").append("<option value='"+rate.id+"'>"+rate.duration+"个月</option>");
				});
				var number = data[0].monthRate;//0.02
				number = number*100;
				number=number.toFixed(4);
				$("#monthrate").html(number);
			}
		});
		
		//给时长的下拉菜单增加事件
		$("#duration").on("change",function(){
			var index = $(this).get(0).selectedIndex;//获取被选择项的下标
			$.ajax({
				type:"post",
				url:"../SelectRate",
				dataType:"json",
				success:function(data){
					var number = data[index].monthRate;//0.02
					number = number*100;
					number=number.toFixed(4);
					
					
					$("#monthrate").html(number);
				}
			});
		});
	})

	$(function(){
		$("button").on("click",function(){
			
		var dataForm = $("form").serialize();
		alert(dataForm);	
		$.ajax({
				type:"post",
				url:"../LoanbillServlet",
				dataType:"json",
				data:dataForm,
				success:function(result){
					alert(result.message);
					location.href="welcome.html";
				}
			});
		});
		
	})


</script>
</body>
</html>